import 'package:flutter/material.dart';
import './res/listDate.dart';

//ListView列表组件
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GridView.builder -- SliverGridDelegateWithMaxCrossAxisExtent'),
          backgroundColor: Colors.green[100],
        ),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({super.key});

  Widget initGridView(context, index) {
    return Container(
      decoration: BoxDecoration(border: Border.all(color: Colors.indigo)),
      child: Column(
        children: [
          Image.network("${listDate[index]['imageUrl']}", fit: BoxFit.cover),
          SizedBox(height: 10),
          Text("${listDate[index]['title']}", style: TextStyle(fontSize: 18)),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    //GridView.builder
    return GridView.builder(
      // reverse: true,//组件反向排序
      padding: EdgeInsets.all(10),
      itemCount: listDate.length,
      // crossAxisSpacing: 10, //水平子Widget之间间距
      // crossAxisCount: 2, //横轴子元素的最大长度
      // mainAxisSpacing: 10, //垂直子Widget之间间距
      // childAspectRatio: 1, //子Widget的宽高比例
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        crossAxisSpacing: 10, //水平子Widget之间间距
        maxCrossAxisExtent: 200, //横轴子元素的最大长度
        mainAxisSpacing: 10, //垂直子Widget之间间距
        childAspectRatio: 1, //子Widget的宽高比例
      ),
      itemBuilder: initGridView,
    );
  }
}
